<!-- 退库申请 -->
<template>
	<view class="">
		<!-- <view class="uni-page-head" v-if="titleFlag">
			<image class="common-title-img" style="left: 20rpx;" :src="require('../../static/imges/fanhui.png')"
				@click="back()" />
			<view class="uni-page-head-title">
				退库申请
			</view>
		</view>
		<view v-if="titleFlag" style="margin-top: 98rpx;" /> -->
		<view style="width: 100%; padding-top: 20rpx;">

      <view style="padding: 0 20rpx;font-size: 26rpx;color: #eb4b4b">根据&lt;供应链管理部&gt;要求只允许塔、房和电源等设备退至虚拟库（即退库类型允许选择可用不入库或不可用不入库），其余物资不允许退至虚拟库。<span style="color: #2979ff" @click.stop="jumpMaterialClassify">【可退至虚拟库物料分类】</span></view>
			<view class="common-body-ex">
				<view class="common-list-ex-patch" style="height: auto;" v-if="type !== '1'">
					<label class="common-list-title-ex">站址编码 :</label>
					<text class="common-list-text-ex-patch" type="text" :selectable="true">{{ chukuDetails.siteId }}</text>
				</view>
				<view class="common-list-ex-patch" style="height: auto;">
					<label class="common-list-title-ex">物料编码 :</label>
					<text class="common-list-text-ex-patch" type="text" :selectable="true">
						{{ chukuDetails.categoryCode }}
					</text>
				</view>
				<view class="common-list-ex-patch" style="height: auto;">
					<label class="common-list-title-ex">物料名称 :</label>
					<text class="common-list-text-ex-patch" type="text" :selectable="true">
						{{ chukuDetails.materialName || chukuDetails.categoryName }}
					</text>
				</view>
				<view class="common-list-ex-patch" style="height: auto;">
					<label class="common-list-title-ex">出库数量 :</label>
					<text class="common-list-text-ex-patch" type="text" :selectable="true">{{ chukuDetails.amount }}</text>
				</view>
				<view class="common-list-ex-patch" style="height: auto;">
					<label class="common-list-title-ex">申请退库总数 :</label>
					<text class="common-list-text-ex-patch" type="text" :selectable="true">
						{{ chukuDetails.retreatAmount }}
					</text>
				</view>
				<view class="common-list-ex-patch" style="height: auto;">
					<label class="common-list-title-ex">完成退库总数 :</label>
					<text class="common-list-text-ex-patch" type="text" :selectable="true">{{ chukuDetails.retreatRealAmount }}</text>
				</view>
				<!-- </view> -->
				<view class="common-list-ex-patch">

					<label class="common-list-title-ex">有无实物 :</label>

					<view class="" style="line-height: 50rpx;margin-left: 24rpx;">

						<!-- <label class="radio" style="margin-right: 10px;"><radio value="1" :checked="checked" @click="radioChange()"/>有</label>
							 <label class="radio"><radio  disabled=true  value="0" :checked="checked2" @click="radioChange2()"/>无</label> -->
						<label class="radio" style="margin-right: 10px;">
							<radio value="1" :checked="checked" @click="radioChange()" />有
						</label>
						<label class="radio">
							<radio value="0" :checked="checked2" disabled=true />无
						</label>
					</view>

				</view>
				<view class="common-list-ex-patch" v-if="checked === true">

					<label class="common-list-title-ex">退库类型 :</label>

					<view class="footer-box__item" style="text-align: right; ">
						<picker @change="aPickerChange" :value="aIndex" :range="ftypeCode" range-key="name" style="display: flex;">
							<input
							class="uni-input"
							style="width: 440rpx; text-align: left;"
							@focus="aPickerFocus"
							:value="selected1Type"
							type="text"
							/>
						</picker>
					</view>
				</view>
				<!-- 根据不同类型选择，无实物的时候只能选择不可用不入库 -->
				<view class="common-list-ex-patch" v-if="checked2 === true">

					<label class="common-list-title-ex">退库类型 :</label>

					<view class="footer-box__item" style="text-align: right; ">
						<picker @change="aPickerChange2" :value="aIndex2" :range="ftypeCode2" range-key="name">
							<input 
							class="uni-input"
							style="width: 440rpx; text-align: left;"
							:value="selected1Type"
							@focus="aPickerFocus"
							type="text"
							disabled="disabled"
							/>
						</picker>
					</view>
				</view>
				<view class="common-list-ex-patch" style="background-color: lemonchiffon;">

					<label class="common-list-title-ex"><text style="color: red;">*</text>退库数量 :</label>

					<input style="font-size: 28rpx;background-color: #fff;" @blur="blurclick()"
						class="common-list-inpur-ex" type="digit" v-model="tksl" v-if="isDisabled"/>
          <text class="common-list-text-ex-patch" type="text" :selectable="true" v-else>{{ chukuDetails.amount }}</text>
				</view>
				<view class="common-list-ex-patch" style="background-color: lemonchiffon;">

					<label class="common-list-title-ex"><text v-if="xihaer" style="color: red;">*</text>保管人 :</label>

					<input :style="serty" class="common-list-inpur-ex" type="text" :disabled="disabled1" v-model="bgr" />

				</view>
				<view class="common-list-ex-patch" style="background-color: lemonchiffon;">

					<label class="common-list-title-ex"><text v-if="xiha" style="color: red;">*</text>保管人联系方式 :</label>

					<input :style="ser" type="tel" class="common-list-inpur-ex" :disabled="disabled2" v-model="bgrlxfs" maxlength="11" />
				</view>
				<view class="common-list-ex-patch" style="background-color: lemonchiffon;">

					<label class="common-list-title-ex"><text v-if="xiha" style="color: red;">*</text>保管人地址 :</label>

					<input :style="ser" class="common-list-inpur-ex" type="text" :disabled="disabled3" v-model="bgrdz" />

				</view>
				<view class="common-list-ex-patch" style="background-color: lemonchiffon;height:auto">

					<label class="common-list-title-ex">备注 :</label>

					<textarea v-model="remark" placeholder="请输入" :count="true" maxlength="60"
							  style="background-color: #FFFFFF; height: 160rpx;font-size: 28rpx;width: 66%;padding: 10rpx"/>

				</view>
			</view>

			<view class="common-btn-body">
				<button class="common-btn" type="warn" v-debounce="save">提交</button>
				<button class="common-btn" @click="chongxiao()" style="border:1px solid #EB4B4B;color:#EB4B4B ;">取消</button>
			</view>


		</view>


	</view>
</template>

<script>
import talkingdata from '../../common/talkingdata.js';
// import imp from "../js/imp";

export default {
	data() {
		return {
			remark:'',
			checked: true,
			focus: false,
			checked2: false,
			aaa: "#2979ff",
			values: "1KV以下电力电缆铜芯阻燃聚氯乙烯绝缘聚氯乙烯护套软电缆ZA-RVV4*25mm2黑",
			chukulist: [],
			chukuDetails: [],
			alerts: '',
			accordion: false,
			index: '',
			prjId: '',
			type: '',
			ser: "font-size: 28rpx;background-color: #e5e5e5",
			serty: "font-size: 28rpx;background-color:#e5e5e5",
			serwe: "font-size: 28rpx;background-color:#e5e5e5",
			bangdingId: '',
			flag: '1',
			//输入
			tksl: '',
			bgr: '',
			bgrlxfs: '',
			bgrdz: '',
			xihaer: false,
			xiha: false,
			//选择框
			selected1Type: '请选择',
			aIndex: 0,
			ftype: "",
			ftypeCode: [
				{
					key: "2",
					name: "可用入库"
				},
				{
					key: "3",
					name: "可用不入库"
				},
				{
					key: "4",
					name: "不可用入库"
				},
				{
					key: "5",
					name: "不可用不入库"
				},

			],
			aIndex2: 0,
			ftypeCode2: [

				{
					key: "5",
					name: "不可用不入库"
				},

			],

			disabled1: true,
			disabled2: true,
			disabled3: true,
			titleFlag: true,
			jieguo: '',
      isDisabled:true
    }
	},
	onLoad(option) {
		this.index = option.index
		this.prjId = option.prjId
		this.type = option.type
		this.bangdingId = option.bangdingId
		this.jieguo = option.jieguo
		console.log("this.prjId==" + this.bangdingId)
		console.log("this.jieguo==" + this.jieguo)
		//判断新老MOA用来显示导航栏
		if (uni.getStorageSync('moaType') == "0") {
			this.titleFlag = false
		}
		//this.getList()
		this.chukuDetails = JSON.parse(decodeURIComponent(option.item));
		console.log(this.chukuDetails, 'this.chukuDetailsthis.chukuDetails')
		this.radioChange();
    this.$axios.get('/material/api/cableMateLabel/isCutAndLj',{ materialCode:this.chukuDetails.materialCode,osDetailId:this.chukuDetails.osDetailId,prjId:option.prjId}).then((res)=>{
        this.isDisabled=res.data;
        if(!res.data){
            this.tksl=this.chukuDetails.amount
        }
    })
    this.getMaterialCheck();
	},
  //进来时应调接口判断：1，当电力电缆的物理属性为固定形状时，即退库数量默认等于出库数量且不允许修改。数据从哪来，应该也得调接口获取 2，当电力电缆的物理属性为可裁剪或空时，退库时允许退库物资出库单明细上的部分米数
	onReady() {
		console.log("执行onReady")
		// let menus = [];
    	// imp.iWindow.setMenus(menus);
		//在页面挂载完成后，调用外部埋点，统计数据
		const script = document.createElement('script');
		script.type = 'text/javascript';
		script.src = talkingdata.talkingKey;
		document.body.appendChild(script);

	},
	methods: {
    getMaterialCheck(){
     this.$axios.post('/material/api/retreat/config/queryByMaterialCode?materialCode='+this.chukuDetails.categoryCode).then((res)=>{
         if(+res.data===0){
             this.ftypeCode=[
                 {
                     key: "2",
                     name: "可用入库"
                 },
                 {
                     key: "4",
                     name: "不可用入库"
                 },
             ]
         }
     })
    },
		back() {
			//this.aPickerChangeer("2");
			uni.navigateBack({
				delta: 1
			});
		},
    jumpMaterialClassify(){
        uni.navigateTo({
            url: '/inspur/materialRequisition/materialClassify'
        });
    },
		jump() {
			console.log("出发")
			uni.navigateTo({
				url: '../work_detail/test'
			});
		},
		clickCheck(e) {
			this.addlist = e
			console.log("出发1" + e)
		},
		chongxiao() {
			this.tksl = '';
			this.bgr = '';
			this.bgrlxfs = '';
			this.bgrdz = '';

			//选择框
			this.selected1Type = '请选择';
			uni.navigateBack({
				delta: 1
			});
			// this.aPickerChangeer("1");
		},

		//选择框
		aPickerChange(e) {
			uni.hideKeyboard()
			console.log("触发" + e.detail.value);
			this.aIndex = e.detail.value;

			this.selected1Type = this.ftypeCode[this.aIndex].name
			this.ftype = this.ftypeCode[this.aIndex].key


			if (this.ftype == '3' || this.ftype == '5') {
				this.aPickerChangeer("2")
				//如果是不入库
				// this.bgr = this.chukuDetails.fieldProjectManager
				// this.disabled2 = false
				// this.disabled3 = false
				// this.ser="font-size: 28rpx;background-color: lemonchiffon"
				// this.xiha=true
				// this.xihaer=true
			}
			if (e.detail.value == "0" || e.detail.value == "2") {
				this.aPickerChangeer("1")
				// console.log("触发0022");
				// this.ser="font-size: 28rpx;background-color: #f7f7f7a3"
				// this.bgr = ""
				// this.disabled2 = true
				// this.disabled3 = true
				// this.xiha=false
				// this.xihaer=false


			}
		},
		aPickerFocus() {
			uni.hideKeyboard()
		},
		aPickerChangeer(e) {
			console.log("点击了那个", e);
			if (e == 1) {
				this.bgr = ""
				this.disabled1 = true
				this.disabled2 = true
				this.disabled3 = true
				this.xiha = false
				this.xihaer = false
				this.ser = "font-size: 28rpx;background-color: #e5e5e5"
				this.serty = "font-size: 28rpx;background-color: #e5e5e5"
			} else {
				this.bgr = this.chukuDetails.fieldProjectManager
				this.disabled1 = false
				this.disabled2 = false
				this.disabled3 = false
				this.serty = "font-size: 28rpx;background-color: #fff"
				this.ser = "font-size: 28rpx;background-color: #fff"
				this.xiha = true
				this.xihaer = true
			}

		},
		aPickerChange2(e) {
			uni.hideKeyboard()
			console.log("触发" + e.detail.value);
			this.aIndex = e.detail.value;

			this.selected1Type = this.ftypeCode2[this.aIndex2].name
			this.ftype = this.ftypeCode2[this.aIndex2].key

			this.ser = "font-size: 28rpx;background-color: #fff"
			this.xiha = false
			this.xihaer = false
			console.log("触发2" + this.ftype);
			//如果是不入库
			this.bgr = this.chukuDetails.fieldProjectManager
			// this.serty = "font-size: 28rpx;background-color: #fff"
			// this.disabled1 = false
			this.disabled2 = false
			this.disabled3 = false
		},
		blurclick() {
			let that = this

			if (that.tksl > this.chukuDetails.canRetreatAmount) {
				uni.showModal({
					title: '温馨提示',
					content: "您输入退库数量大于可申请退库数量，请修改退库数量",
          confirmColor:'#eb4b4b',
					showCancel: false,
					success: function (res) {
						if (res.confirm) {
							that.tksl = ""

						}
					}
				})
			}
			if (that.tksl > that.jieguo) {
				uni.showModal({
					title: '温馨提示',
					content: "常规退库资源不足，请修改退库数量或使用【扫码退库】功能退有签有码资源",
          confirmColor:'#eb4b4b',
					showCancel: false,
					success: function (res) {
						if (res.confirm) {
							that.tksl = ""

						}
					}
				})
			}
		},
		/**
		 * @author: MrLiu
		 * @time: 2021-11-23
		 * @Title: 提交
		 */
		getCheckOne(){
			return new Promise((resolve,reject) => {
				if (this.selected1Type == "请选择") {
					uni.showModal({
						title: '温馨提示',
						content: "请选择退库类型",
						showCancel: false,
						confirmColor: '#eb4b4b',
					})
					reject('fail')
				}else{
					resolve('success')
				}
			});
		},
		getCheckTwo(){
			return new Promise((resolve,reject) => {
				if (this.tksl == "" && this.isDisabled) {
					uni.showModal({
						title: '温馨提示',
						content: "请输入退库数量",
						showCancel: false,
						confirmColor: '#eb4b4b',
					})
					reject('fail')
				}else{
					resolve('success')
				}
			});
		},
		async save() {

			let that = this
			// 保管人联系方式正则检验
			const tmp = /(^((\+86)|(86))?(1[3-9])\d{9}$)|(^(0\d{2,3})-?(\d{7,8})$)/
            if (['3', '5'].includes(this.ftype) && !tmp.test(this.bgrlxfs)) {
				uni.showModal({
					title: '温馨提示',
					content: "请输入11位正确格式的联系方式！",
          			confirmColor:'#eb4b4b',
					showCancel: false,
					success: function (res) {
						this.bgrlxfs = ''
					}
				})
				return;
            }
			await this.getCheckOne();
			await this.getCheckTwo();

			//如果选择了不入库，校验相关字段
			if (that.disabled2 === false) {

				if (that.bgr == "") {
					uni.showModal({
						title: '温馨提示',
						content: "请输入保管人",
            			confirmColor:'#eb4b4b',
						showCancel: false,
					})
					return;
				}
				if (that.bgrlxfs == "") {
					uni.showModal({
						title: '温馨提示',
						content: "请输入保管人联系方式",
						confirmColor:'#eb4b4b',
						showCancel: false,
					})
					return;
				}
				if (that.bgrdz == "") {
					uni.showModal({
						title: '温馨提示',
						content: "请输入保管人地址",
            			confirmColor:'#eb4b4b',
						showCancel: false,
					})
					return;
				}
			}
			// material/api/receive/equip/getRetreatSpuUnitAccByMaterialCode?retreatAmount=1&materialCode=01240102420101020001
			const {
				prjId,
				bundingId, // 绑定id
				fieldProjectManager, // 管理人
				materialCode, // 物料编码
				outputType, // 出库类型
				pmsRetreatType = '31', // 退库单类型
				sourceAssetCode,
				osDetailId,
				canRetreatAmount // 可退库数量
			} = this.chukuDetails
			const params = {
				bundingId,
				fieldProjectManager,
				materialCode,
				outputType,
				pmsRetreatType,
				sourceAssetCode: sourceAssetCode ?? '',
				prjId,
				osDetailId: this.type === '3' ? osDetailId : '',
				canRetreatAmount,
				isMaterialObject: '1',
				refundType: this.ftype,
				keeper: this.bgr,// 保管人
				keeperContact: this.bgrlxfs, // 保管人联系方式
				keeperAddress: this.bgrdz, // 保管人地址
				retreatAmount: this.tksl.toString(), // 退库数量
				remark:this.remark
			}
			console.log("提交数组=" + JSON.stringify(params));
			uni.showModal({
				title: '温馨提示',
				content: "是否确认提交",
        confirmColor:'#eb4b4b',
				success: (r) => {
					console.log(r, '356561')
					if (r.confirm) {
						this.$axios.post('/material/api/receive/equip/getRetreatSpuUnitAccByMaterialCode', {}, {}, { retreatAmount: params.retreatAmount, materialCode }).then(equip => {
							this.$axios.post('/material/api/retreat/routineRetreatApply', params).then(res => {
								console.log(res, '退库提交')
								uni.showModal({
									title: "温馨提示",
									content: "退库提交成功",
                  confirmColor:'#eb4b4b',
									showCancel: false,
									success: (e) => {
										uni.navigateBack({
											delta: 1
										});
									}
								});
							})
						})
					}
				}
			});
		},
		//手动控制一下吧-。-
		radioChange() {
			this.selected1Type = '请选择';
			this.bgr = '';
			if (this.checked == false) {
				this.checked = true
				this.checked2 = false
				console.log(this.checked + "触发1" + this.checked2)
				this.flag = "1"
			}

		},
		radioChange2() {
			this.selected1Type = '请选择';
			this.bgr = '';
			this.checked = false
			this.checked2 = true
			console.log(this.checked + "触发2" + this.checked2)
			this.flag = "0"
		},

	}
}
</script>


<style>
@import '@/common/common-ui.css';

.footer-box__item {
	display: flex;
	align-items: center;
}

.bgr-text {
	line-height: 40px;
	margin-left: 15px;
}</style>
